<!DOCTYPE html>
<html>

	<head>
		<title>news</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content=" ">
		<link rel="stylesheet" href="lib/mui.min.css" />
		<link rel="stylesheet" href="lib/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.css">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="lib/preview.css">
	</head>
	<style>
		/*.myreview{width: 90%;left:5%;border:1px solid #ddd;overflow: hidden;position: fixed;bottom: .5rem;text-align: center;background: #fff;height: 2rem;line-height: 2rem;border-radius: 1rem}
	.myreview li{float: left;list-style: none;height: 2rem;line-height: 2rem}
	.myreview li img{width: 1.5rem;height: 1.5rem;vertical-align: middle;margin-bottom: .25rem}
	.myreview li span{font-size: .6rem;color: #888}*/
		
		.img-active {
			color: yellow!important
		}
		
		.mui-icon {
			width: 1.6rem;
			height: 1.6rem;
			display: inline-block;
			font-size: 1.6rem!important
		}
		
		
		
		.weui-icon_msg {
			font-size: 2rem;
			margin-bottom: .4rem;
			display: block;
		}
		
		.mui-toast-container {
			text-align: center;
			line-height: 17px;
			overflow: hidden;
			position: fixed;
			width: 5rem;
			/*height: 6rem;*/
			z-index: 9999;
			top: 50%;
			left: 50%;
			margin-top: -53px;
			-webkit-transition: opacity .3s;
			transition: opacity .3s;
			-webkit-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
			opacity: 0;
		}
		
		.mui-toast-container.mui-active {
			opacity: .8;
		}
		
		.mui-toast-message {
			font-size: 14px;
			/*	//padding: 10px 25px;*/
			text-align: center;
			color: #fff;
			padding: 10px;
			border-radius: 6px;
			background-color: #323232;
		}
	</style>

	<body ontouchstart>
		<div class="news-content">
			<!--<h3 class="news-title">是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡</h3>-->
			<div class="head-img">
				<!--<img src="img/head.png">
				<div class="head-info">
					<p>五彩蓓蕾</p>
					<p><span>2017-03-17</span></p>
				</div>-->
			</div>
			<div class="article">
				<!--<img class="lazy" data-original="img/pic_article.png" data-preview-src="" data-preview-group="1">
				<p>人性的沦丧还是道德的滑坡,云河空间，云河空间，云河空间，云河空间,是人性的沦丧还是道德的滑坡的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,让我们为您深刻解读这背后的深层社会原因</p>
				<img class="lazy" data-original="img/swiper-1.jpg" data-preview-src="" data-preview-group="1">
				<p>人性的沦丧还是道德的滑坡,云河空间，云河空间，云河空间，云河空间,是人性的沦丧还是道德的滑坡的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,让我们为您深刻解读这背后的深层社会原因</p>-->

			</div>
			<div class="comment-box">

				<!--<div class="comment">
					<div class="avtar">
						<img src="img/product1.png">
					</div>
					<div class="comment-content">
						<p class="avtar-name">风云天下</p>
						<p class="comments">人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡的沦丧还是道德的滑坡.</p>
						<p class="comment-time"><span>03-10 11:11</span></p>
					</div>
				</div>-->
			</div>
		</div>
		<div class="myreview">
			<ul>
				<li>
					<span class="pinlun"><img src="img/comment.png"></span>
					<span>我来评论</span>
				</li>

				<li>
					<!--<img src="img/collect1.png" class="collect">-->
					<span class="collect"><img src="img/collect.png" class="collect"></span>
					<span>收藏</span>
				</li>
				<li>
					<span class="share"><img src="img/share.png" class="share"></span>
					<span>分享</span>
				</li>
			</ul>
		</div>
		<div class="clear"></div>
		<script src="lib/jquery-2.1.4.js"></script>
		<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
		<script src="lib/fastclick.js"></script>
		<script type="text/javascript" src="lib/mui.min.js"></script>
		<script type="text/javascript" src="lib/mui.previewimage.js"></script>
		<script type="text/javascript" src="lib/mui.zoom.js"></script>
		<script type="text/javascript" src="js/jquery-weui.js"></script>

		<script>
			FastClick.attach(document.body);
			$("img.lazy").lazyload({
				placeholder: "img/pic_article.png",
				threshold: 200,
				event: 'scroll',
				//failurelimit : 10 ,
				effect: "fadeIn"
			});
			mui.init();
			mui.previewImage();
			//获得slider插件对象

			(function($, window) {
				var CLASS_ACTIVE = 'mui-active';
				/**
				 * 自动消失提示框
				 */
				$.toast = function(message, options) {
					var durations = {
						'long': 3500,
						'short': 2000
					};

					//计算显示时间
					options = $.extend({
						duration: 'short'
					}, options || {});

					if($.os.plus && options.type !== 'div') {
						//默认显示在底部；
						$.plusReady(function() {
							plus.nativeUI.toast(message, {
								verticalAlign: 'bottom',
								duration: options.duration
							});
						});
					} else {
						if(typeof options.duration === 'number') {
							duration = options.duration > 0 ? options.duration : durations['short'];
						} else {
							duration = durations[options.duration];
						}
						if(!duration) {
							duration = durations['short'];
						}
						
						
						var toast = document.createElement('div');
						toast.classList.add('mui-toast-container');
//						$('.collect').click(function(){
//							toast.innerHTML = '<div class="' + 'mui-toast-message' + '">' + '<i class="weui-icon-success weui-icon_msg"></i>' + message + '</div>';
//						})
						toast.innerHTML = '<div class="' + 'mui-toast-message' + '">' + '<i class="weui-icon-success weui-icon_msg"></i>' + message + '</div>';
						
						
						toast.addEventListener('webkitTransitionEnd', function() {
							if(!toast.classList.contains(CLASS_ACTIVE)) {
								toast.parentNode.removeChild(toast);
								toast = null;
							}
						});
						//点击则自动消失
						toast.addEventListener('click', function() {
							toast.parentNode.removeChild(toast);
							toast = null;
						});
						document.body.appendChild(toast);
						toast.offsetHeight;
						toast.classList.add(CLASS_ACTIVE);
						setTimeout(function() {
							toast && toast.classList.remove(CLASS_ACTIVE);
						}, duration);
					}
				};

			})(mui, window);

			$(function() {

				//				$.fn.toggle = function(fn, fn2) {
				//					var args = arguments,
				//						guid = fn.guid || $.guid++,
				//						i = 0,
				//						toggle = function(event) {
				//							var lastToggle = ($._data(this, "lastToggle" + fn.guid) || 0) % i;
				//							$._data(this, "lastToggle" + fn.guid, lastToggle + 1);
				//							event.preventDefault();
				//							return args[lastToggle].apply(this, arguments) || false;
				//						};
				//					toggle.guid = guid;
				//					while(i < args.length) {
				//						args[i++].guid = guid;
				//					}
				//					return this.click(toggle);
				//				};

				$(document).on('click', '.comment', function() {
					//alert(333333);
					window.location.href = 'comments.html'
				})

				$(document).on('click', '.collect', function() {
					$(this).attr('src','img/collect-active.png');
					mui.toast('收藏成功', {
							duration: 'long',
							type: 'div'
						})
						
				})
				
				$(document).on('click', '.share', function() {
					//$(this).attr('src','img/collect-active.png');
					//mui.toast.innerHTML = '<div class="mui-toast-message"><i class="weui-icon-cancel weui-icon_msg"></i> 分享成功</div>';
					mui.toast('分享成功', {
							duration: 'long',
							type: 'span'
						})
						
				})

				var ntitle = "";
				var headimg = '';
				var artic = '';

				$.ajax({
					type: 'GET',
					url: 'http://cf.588net.com/index.php/api/Article/getdetail?id=2',
					dataType: 'json',
					success: function(e) {
						//alert(title) 
						//console.log(e.data);
						//console.log(e.data['title']);

						ntitle += '<h3 class="news-title">' + e.data['title'] + '</h3>';
						headimg += '<img src="img/head.png"><div class="head-info">';
						headimg += '<p>' + e.data['username'] + '</p><p><span>' + e.data['update_time'] + '</span></p>';
						headimg += '</div>';
						artic += '<img class="lazy" data-original="img/pic_article.png" data-preview-src="" data-preview-group="1">';
						artic += '<p>人性的沦丧还是道德的滑坡,云河空间，云河空间，云河空间，云河空间,是人性的沦丧还是道德的滑坡的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,让我们为您深刻解读这背后的深层社会原因</p>';
						artic += '<img class="lazy" data-original="img/swiper-1.jpg" data-preview-src="" data-preview-group="1">';
						artic += '<p>人性的沦丧还是道德的滑坡,云河空间，云河空间，云河空间，云河空间,是人性的沦丧还是道德的滑坡的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,是人性的沦丧还是道德的滑坡,让我们为您深刻解读这背后的深层社会原因</p>';

						$(ntitle).insertBefore('.head-img');
						$('.head-img').append(headimg);
						$('.article').append(artic);
			
						$("img.lazy").lazyload({
							placeholder: "img/pic_article.png",
							threshold: 200,
							event: 'scroll',
							//failurelimit : 10 ,
							effect: "fadeIn"
						});

					}

				})

				$.ajax({
					type: "get",
					url: "http://cf.588net.com/index.php/api/article_comment/getCommentList?id=1",
					async: true,
					dataType: 'json',
					//data:{"id":id,"pid":pid,"page":page},
					success: function(e) {
						//alert(e.data)
						var comt = '';
						
						$.each(e.data, function(a, b) {
							//console.log(b);
							comt += '<div class="comment">';
							comt += '<div class="avtar"><img src="' + b.useravatar + '"></div>';
							comt += '<div class="comment-content">';
							comt += '<p class="avtar-name">' + b.username + '</p>';
							comt += '<p class="comments">' + b.comment + '</p>';
							comt += '<p class="comment-time"><span>' + b.create_time + '</span> · <span>回复> </span></p>';
							comt += '</div>';
							comt += '</div>';
						});
						$('.comment-box').append(comt)
					}
				});

			});
		</script>
	</body>

</html>